<template>
  <h1>信息</h1>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <button @click="sayHello">我是谁？</button>
  <h2>Vue2姓名：{{ xingming }}</h2>
  <button @click="sayWelcome">我是Vue2的methods</button>
  <hr />
  <button @click="test1">vue2的调用vue3数据</button>
  <button @click="test2">vue3的调用vue2数据</button>
</template>

<script>
// 引入渲染对象
import { h } from "vue";
import func from "vue-editor-bridge";
export default {
  name: "App",
  data() {
    return {
      xingming: "vue3姓名",
    };
  },
  methods: {
    sayWelcome() {
      alert("你好啊我是vue2的methods");
    },
    test1() {
      console.log(this.age);
      console.log(this.name);
      console.log(this.sayHello);
    },
  },
  setup(props) {
    // 数据
    let name = "张三";
    let age = 19;

    function sayHello() {
      alert(`你好啊，我是${name}，我${age}岁了`);
    }
    function test2() {
      console.log(name);
      console.log(age);
      console.log(this.xingming);
    }

    // 返回一个对象（常用）
    return {
      name,
      age,
      sayHello,
      test2,
    };

    // 返回一个函数————渲染函数
    // 回覆盖原有结构
    // return () => h("h1", "阿占");
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
